<template>
    <div class="masonry-container">
      <!-- grid-sizer 控制每列宽度 -->
      <div class="grid-sizer"></div>
      <!-- gutter-sizer 控制列之间的间隙（在这个实现中未使用） -->
      <div class="gutter-sizer"></div>
  
      <!-- 遍历 postList 渲染图片 -->
      <div
        class="grid-item"
        v-for="(item, index) in postList"
        :key="index"
      >
        <img :src="item.imgUrl" alt="image" />
      </div>
    </div>
  </template>
  <script setup>
  import { ref, onMounted, onBeforeUnmount, watch } from "vue";
  import Masonry from "masonry-layout"; // Masonry 布局库
  import imagesLoaded from "imagesloaded"; // 等待所有图片加载完成后再布局
  // 假设 getPostListAPI 已经定义好
  import { getPostListAPI } from "../../api/community";
  
  // 存储帖子列表数据
  const postList = ref([]);
  
  // 保存 Masonry 实例以便后续销毁或更新
  const masonryInstance = ref(null);
  
  // 当前展示的列数，默认为 4 列
  const columnCount = ref(4);
  
  // 固定间隔为 10px
  const gap = 10;
  
  /**
   * 根据窗口宽度决定列数：
   * - 大于 1200px：4 列
   * - 600 ~ 1200px：3 列
   * - 小于 600px：2 列
   */
  function calculateColumns() {
    const width = window.innerWidth;
    if (width > 1200) {
      columnCount.value = 4;
    } else if (width >= 600) {
      columnCount.value = 3;
    } else {
      columnCount.value = 2;
    }
    updateGridSizerWidth(); // 更新网格项宽度
  }
  
  /**
   * 动态设置 .grid-sizer 和 .grid-item 的宽度以适配当前列数
   */
  function updateGridSizerWidth() {
    const container = document.querySelector(".masonry-container");
    const gridSizer = container?.querySelector(".grid-sizer");
  
    if (!gridSizer) return;
  
    // 总间距 = 每列之间一个间隔 × (列数 - 1)
    const totalGutterWidth = gap * (columnCount.value - 1);
    // 可用宽度 = 容器总宽减去所有间隔
    const availableWidth = container.clientWidth - totalGutterWidth;
    // 每个项目的宽度 = 可用宽度 / 列数
    const itemWidth = availableWidth / columnCount.value;
  
    // 设置 grid-sizer 宽度用于 Masonry 计算
    gridSizer.style.width = `${itemWidth}px`;
  
    // 手动设置每个 grid-item 的宽度，避免 Masonry 错误计算
    const gridItems = container.querySelectorAll('.grid-item');
    gridItems.forEach(item => {
      item.style.width = `${itemWidth}px`;
    });
  }
  
  /**
   * 获取帖子列表数据
   */
  const getPostList = async () => {
    let params = {
      pageNo: 1,
      pageSize: 800,
      userId: 1
    };
    const result = await getPostListAPI(params);
    postList.value = result.data.data.rows; // 数据赋值触发 watcher
  };
  
  /**
   * 初始化 Masonry 布局
   */
  function initMasonryLayout() {
    const container = document.querySelector(".masonry-container");
  
    // 如果已有实例，则先销毁旧实例
    if (masonryInstance.value) {
      masonryInstance.value.destroy();
    }
  
    // 等待所有图片加载完成后初始化 Masonry
    imagesLoaded(container, () => {
      masonryInstance.value = new Masonry(".masonry-container", {
        columnWidth: ".grid-sizer",       // 使用 grid-sizer 计算列宽
        gutter: gap,                      // 设置固定间隔
        itemSelector: ".grid-item",       // 指定 Masonry 处理的元素
        percentPosition: false,           // 使用像素而非百分比定位
        transitionDuration: "0.2s",       // 动画过渡时间
        stagger: 30,                      // 元素错开加载动画
      });
    });
  }
  
  let resizeTimeout;
  
  /**
   * 处理窗口大小变化事件
   */
  function handleResize() {
    clearTimeout(resizeTimeout);
    resizeTimeout = setTimeout(() => {
      refreshLayout(); // 防抖处理，防止频繁重绘
    }, 300);
  }
  
  /**
   * 刷新布局（重新计算列数并初始化 Masonry）
   */
  function refreshLayout() {
    calculateColumns();
    initMasonryLayout();
  }
  
  onMounted(() => {
    // calculateColumns(); // 初始化列数
    // getPostList();      // 请求数据

    handleResize();

    
    getPostList();      // 请求数据

    window.addEventListener("resize", handleResize); // 监听窗口变化
  });
  
  onBeforeUnmount(() => {
    window.removeEventListener("resize", handleResize); // 组件卸载时移除监听
    if (masonryInstance.value) {
      masonryInstance.value.destroy(); // 销毁 Masonry 实例
    }
  });
  
  /**
   * 监听 postList 数据长度变化，当有新数据时刷新布局
   */
  watch(
    () => postList.value.length,
    (newLength) => {
      if (newLength > 0) {
        refreshLayout(); // 数据加载后更新布局
      }
    },
    { immediate: true } // 立即执行一次监听回调
  );
  </script>

<style scoped lang="less">
.masonry-container {
  width: 100%;
//   overflow: hidden;
  background-color: aqua;
  position: relative;

  .grid-sizer,
  .gutter-sizer {
    display: none; /* 这两个 div 不需要显示出来，仅作为 Masonry 布局参考 */
  }

  .grid-item {
    margin-bottom: 10px; /* 为每个项目添加底部边距 */
    background-color: #ccc;

    img {
      width: 100%;     /* 图片自动填充容器宽度 */
      height: auto;    /* 高度自适应，保持比例 */
    }
  }
}
</style>